<template>
  <view>
    <!-- <uni-nav-bar
      left-icon="back"
      title="藏头诗表白"
      fixed="true"
      status-bar="true"
      @clickLeft="goback"
    ></uni-nav-bar> -->
    <uni-search-bar
      @confirm="search"
      @input="input"
      placeholder="请输入要藏头的文字"
    ></uni-search-bar>
    <view v-for="(item, index) in data" :key="index" class="list">
      {{ item }}
    </view>
  </view>
</template>
<script>
import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
import data_one from "./poet.song.1000.json";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  components: { uniNavBar, uniSearchBar },
  onLoad: function () {
    this.list = data_one;
  },
  data() {
    return {
      list: [],
      data: [],
    };
  },
  methods: {
    search(e) {
      this.data = [];
      let search = e.value.split("");
      search.forEach((item, index) => {
        this.list.forEach((key) => {
          key.paragraphs.forEach((k) => {
            if (k.split("")[0] === item) {
              if (this.data.length === index) {
                this.data.push(k);
              } else {
                if (this.data.length <= index) {
                  this.data.push("翻遍诗典没找到，你快过来自己编");
                }
              }
            }
          });
        });
      });
    },
    input(e) {
      console.log(e);
      if (!e.value) {
        this.data = [];
      }
    },
    goback() {
      uni.switchTab({
        url: `../index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.list:first-letter {
  color: #f00;
}
</style>